﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>F.scroll演示</title>
<style type="text/css">
*{margin:0; padding:0;}
#sbox10 li{float:left; list-style:none;}
#sbox10 .panel{width:600px; height:100px; overflow:hidden;}
#sbox10 .panel img{width:120px; height:80px; margin:10px 15px;}

#sbox10 .prev{width:27px; height:100px; background-image:url(data/img/slides/plmm/left_light.gif); cursor:pointer;}
#sbox10 .next{width:27px; height:100px; background-image:url(data/img/slides/plmm/right_light.gif); cursor:pointer;}
#sbox10 .prev2{width:27px; height:100px; background-image:url(data/img/slides/plmm/left_dark.gif); cursor:auto;}
#sbox10 .next2{width:27px; height:100px; background-image:url(data/img/slides/plmm/right_dark.gif); cursor:auto;}
</style>
<script type="text/javascript" src="1st.js"></script>
</head>
<body>
<h3>PLMM SHOW 幻灯片示例</h3>
<ul id="sbox10">
    <li class="prev" title="向前"></li>
    <li class="panel">
		<div class="wrap">
			<img src="data/img/slides/plmm/1.jpg" />
			<img src="data/img/slides/plmm/2.jpg" />
			<img src="data/img/slides/plmm/3.jpg" />
			<img src="data/img/slides/plmm/4.jpg" />
			<img src="data/img/slides/plmm/5.jpg" />
			<img src="data/img/slides/plmm/6.jpg" />
			<img src="data/img/slides/plmm/7.jpg" />
			<img src="data/img/slides/plmm/8.jpg" />
			<img src="data/img/slides/plmm/9.jpg" />
			<img src="data/img/slides/plmm/10.jpg" />
		</div>
	</li>
    <li class="next" title="向后"></li>
</ul>

<script type="text/javascript">
F("sbox10").slides({
	panel: "scrollLeft",
	init: function(me){
		me.maxlen = me.conlen - me.boxlen;
		me.aniAfter(me);
	},
	aniAfter: function(me){
		var n = me.panel.scrollLeft();
		me.prev.cls(n>0?"prev":"prev2");
		me.next.cls(me.maxlen>0&&n<me.maxlen?"next":"next2");
	},
	loop: 0
});
</script>
</body>
</html>